import React, { PureComponent } from 'react'
import {Text, View, StyleSheet} from 'react-native'
import moment from 'moment'
import PropTypes from 'prop-types'
import {getCurrentMonth, getFirstMonth} from '../../../utils/Libs'
import {RangeDatePicker, TextButton} from '../../../widgets'
import color from '../../../utils/color'
import screen from '../../../utils/screen'
import {createAction, NavigationActions} from '../../../utils'


export default class extends PureComponent {
  static propTypes = {
    changeDate: PropTypes.any,
    initTime: PropTypes.any,
  }
  constructor(props) {
    super(props)
    const { initTime } = this.props
    this.state = {
      currentSeaType: initTime.timeType, // year month custom
      showRangeTimer: false,
      timeViewText: "~",
      timeStart: null,
      timeEnd: null,
    }
  }

  componentDidMount() {
    const { initTime } = this.props
    this.renderTimeStyle(this.state.currentSeaType, initTime.startTime, initTime.endTime)
  }

  toggleShowRange = (type) => {
    let showRangeTimer = this.state.showRangeTimer
    if(type === this.state.currentSeaType) {
      showRangeTimer = !showRangeTimer
    } else {
      showRangeTimer = true
    }
    this.setState({
      currentSeaType: type,
      showRangeTimer : showRangeTimer
    })
  }

  closeShowRange = () => {
    this.setState({
      showRangeTimer: false
    })
  }

  renderTimeStyle = (type, first, end) => {
    let timeViewText = ''
    // if(first === end) {
      // timeViewText = first
    // } else {
    if(type  === "year") {
      timeViewText = first.substring(0, first.indexOf('.')) + "年"
    } else if(type === "month") {
      timeViewText = first
    } else {
      timeViewText = first + "~" + end
    }
    this.setState({
      currentSeaType: type,
      timeStart: moment(first, 'YYYY.MM').toDate(),
      timeEnd: moment(end, 'YYYY.MM').toDate(),
      timeViewText: timeViewText
    }, () => {
      this.props.changeDate && this.props.changeDate(type, first, end)
    })
  }

  timePickerSubmit = (v1, v2) => {
    this.renderTimeStyle('custom', moment(v1).format("YYYY.MM"), moment(v2).format("YYYY.MM"))
  }

  monthTimePickerSubmit = (v1) => {
    this.renderTimeStyle('month', moment(v1).format("YYYY.MM"), moment(v1).format("YYYY.MM"))
  }

  yearTimePickerSubmit = (v1) => {
    if(moment(v1).format("YYYY") === moment().format("YYYY")) {
      this.renderTimeStyle('year', moment(v1).startOf('year').format("YYYY.MM"), moment().format("YYYY.MM"))
    } else {
      this.renderTimeStyle('year', moment(v1).startOf('year').format("YYYY.MM"), moment(v1).endOf('year').format("YYYY.MM"))
    }
  }

  render() {
    const { currentSeaType, showRangeTimer, timeViewText ,timeStart, timeEnd} = this.state
    const { extra } = this.props;
    return (
      <View>
        <View style={styles.topTab}>
          <View style={styles.topTabLeft}>
            <TextButton
              onPress={() => this.toggleShowRange('year')}
              style={this.state.currentSeaType === 'year' ?  styles.topTabLeftFont: styles.topTabLeftFontOpacity}
              title="整年"
            />
            <View style={styles.topTabLeftSpace} />
            <TextButton
              onPress={() => this.toggleShowRange('month')}
              style={this.state.currentSeaType === 'month' ?  styles.topTabLeftFont: styles.topTabLeftFontOpacity}
              title="整月"
            />
            <View style={styles.topTabLeftSpace} />
            <TextButton
              onPress={() => this.toggleShowRange('custom')}
              style={this.state.currentSeaType === 'custom' ?  styles.topTabLeftFont: styles.topTabLeftFontOpacity}
              title="自定义"
            />
            <Text style={styles.topTabExtraFont}>{extra}</Text>
          </View>
          <View style={styles.topTabRight}>
            <Text style={styles.topTabRightFont}>{timeViewText}</Text>
          </View>
        </View>
        <RangeDatePicker key={0} visible={this.state.currentSeaType === "year" && this.state.showRangeTimer === true} mode="year" onSubmit={this.yearTimePickerSubmit}  hideFunc={this.closeShowRange}/>
        <RangeDatePicker key={1} visible={this.state.currentSeaType === "month" && this.state.showRangeTimer === true} mode="month" onSubmit={this.monthTimePickerSubmit}  hideFunc={this.closeShowRange}/>
        <RangeDatePicker key={2} valueOne={timeStart} valueTwo={timeEnd} visible={this.state.currentSeaType === "custom" && this.state.showRangeTimer === true} mode="custom" onSubmit={this.timePickerSubmit} hideFunc={this.closeShowRange} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  topTab: {
    backgroundColor: color.theme,
    height: screen.pxToDp(100),
    flexDirection: 'row',
    paddingHorizontal: screen.pxToDp(26),
    paddingBottom: screen.pxToDp(30)
  },
  topTabLeft: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-end',
    flex: 2,
  },
  topTabLeftFont: {
    fontSize: screen.pxToDp(39),
    color: '#FFFFFF',
  },
  topTabExtraFont: {
    fontSize: screen.pxToDp(20),
    color: '#FFFFFF',
    marginLeft: screen.pxToDp(8)
  },
  topTabLeftFontOpacity: {
    fontSize: screen.pxToDp(39),
    color: '#FFFFFF',
    opacity: 0.5,
  },
  topTabLeftSpace: {
    width: screen.pxToDp(30),
  },
  topTabRight: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    flex: 2
  },
  topTabRightFont: {
    fontSize: screen.pxToDp(30),
    color: '#FFFFFF',
  },
})
